<template>
    <div class="mine">
      <h3>饿了么</h3>
      <div class="card">
          <span class="p1">吃货卡</span>
          <span class="p2">吃货豆 <span class="teshu">1461</span></span><br>
          <p class="p4">升级吃货卡，每月获取满减红包</p>
      </div>
      <div>
          <p class="tit">常用工具</p>
          <ul>
              <li v-for="(item,index) in list" :key="index" @click="toCollect(index)">
                <van-icon :name="item.icon" size="24" />
              <p>{{item.name}}</p>
              </li>
          </ul>
      </div>
    </div>
  </template>
  
  <script>
  export default {
      data(){
          return{
              list:[
                  {name:"我的地址",icon:'location-o'},
                  {name:"我的咨询",icon:'phone-circle-o'},
                  {name:"店铺关注",icon:'like-o'},
                  {name:"评价有礼",icon:'star-o'}
              ]
          }
      },
      methods:{
        toCollect(index){
            if(index==2){
                this.$router.push('/collect');
            }
        }
      }
  }
  </script>
  
  <style lang="scss" scoped>
  .card{
      width: 90%;
      height: 100px;
      background:linear-gradient(rgb(241, 185, 81),rgb(243, 91, 3));
      border-radius: 12px;
      margin: 20px auto;
      text-align: center;
      box-sizing: border-box;
  }
  .tit{
      font-weight: bold;
      margin: 10px 5px;
  }
  .p1{
      font-size: 20px;
      color: #fff;
  }
  .p2{
      margin-left: 20px;
      font-size: 14px;
      color: #fff;
  }
  .teshu{
      font-size: 16px;
  }
  .p4{
      margin-top: 20px;
      color: #fff;
  }
  ul{
      width: 100%;
      list-style: none;
      display: flex;
      margin-top: 24px;
  }
  ul li{
      width: 25%;
      display: flex;
      font-size: 13px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      
  }
  </style>
